<template>  
  <div class="device-status">  
    <!-- 标题部分 -->  
    <div class="header">  
      <div class="icon">  
        <!-- <img src="" alt="设备状态图标" /> -->  
      </div>  
      <div class="title">设备状态</div>  
      <div class="status-bar"></div>  
    </div>  

    <!-- 统计数据部分 -->  
    <div class="stats">  
      <div class="stats-item">  
        <img src="@/assets/images/images/icon.png" alt="在线数量" class="stats-icon" />  
        <div class="stats-value">  
          <span class="number">325</span>  
          <span class="label">在线数量</span>  
        </div>  
      </div>  
      <div class="stats-item">  
        <img src="@/assets/images/images/icon.png" alt="预警数量" class="stats-icon" />  
        <div class="stats-value">  
          <span class="number">12</span>  
          <span class="label">预警数量</span>  
        </div>  
      </div>  
      <div class="stats-item">  
        <img src="@/assets/images/images/icon.png" alt="故障数量" class="stats-icon" />  
        <div class="stats-value">  
          <span class="number">02</span>  
          <span class="label">故障数量</span>  
        </div>  
      </div>  
    </div>  

    <!-- 事件日志列表 -->  
    <div class="log-list">  
      <div class="log-item">  
        <div class="log-content">  
          <div class="log-time">09/25 08:32:23</div>  
          <div class="log-desc">开水闸</div>  
          <div class="log-state failure">故障</div>  
        </div>  
      </div>  
      <div class="log-item">  
        <div class="log-content">  
          <div class="log-time">09/25 08:32:23</div>  
          <div class="log-desc">4号进水灯</div>  
          <div class="log-state failure">故障</div>  
        </div>  
      </div>  
      <div class="log-item">  
        <div class="log-content">  
          <div class="log-time">09/25 08:32:23</div>  
          <div class="log-desc">2号出水口</div>  
          <div class="log-state warning">预警</div>  
        </div>  
      </div>  
    </div>  
  </div>  
</template>  

<script>  
export default {  
  name: "DeviceStatus",  
  mounted() {  
    this.updateSize(); // 初始化时调整尺寸  
    window.addEventListener("resize", this.updateSize); // 监听窗口大小变化  
  },  
  beforeDestroy() {  
    window.removeEventListener("resize", this.updateSize); // 移除监听器  
  },  
  methods: {  
    updateSize() {  
      const parent = this.$el.parentNode; // 获取父容器  
      if (parent) {  
        this.$el.style.width = `${parent.offsetWidth}px`; // 设置宽度为父容器宽度  
      }  
    },  
  },  
};  
</script>  

<style scoped>  
/* 主容器样式 */  
.device-status {  
  position: relative; 
  width: 100%; /* 容器宽度占满父容器 */  
  max-width: 600px; /* 最大宽度限制 */ 
  height: 300px; /* 固定高度 */   
  padding: 10px; 
  border-radius: 8px;  
  background: rgba(0, 20, 40, 0.9); /* 深色透明背景 */  
  border: 1px solid rgba(0, 255, 255, 0.4); /* 边框 */  
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.5); /* 外发光 */  
  color: #fff;  
  font-family: Arial, sans-serif;  
  display: flex;  
  flex-direction: column;  
}  





/* 标题样式 */  
.header {  
  display: flex;  
  align-items: center;  
  margin-bottom: 1.5rem;  
}  

.icon img {  
  width: 1.5rem;  
  height: 1.5rem;  
  margin-right: 0.5rem;  
  filter: drop-shadow(0 0 5px rgba(0, 183, 255, 0.8)); /* 图标发光 */  
}  

.title {  
  font-size: 1.2rem;  
  font-weight: bold;  
  color: #00b7ff; /* 标题颜色 */  
  flex-grow: 1;  
}  

.status-bar {  
  height: 1px;  
  flex-grow: 1;  
  background: repeating-linear-gradient(  
    90deg,  
    rgba(0, 183, 255, 0.5) 0,  
    rgba(0, 183, 255, 0.5) 5px,  
    transparent 5px,  
    transparent 10px  
  );  
}  

/* 统计数据样式 */  
.stats {  
  display: flex;  
  justify-content: space-between;  
  margin-bottom: 1.5rem;  
}  

.stats-item {  
  display: flex;  
  align-items: center;  
}  

.stats-icon {  
  width: 2.5rem;  
  height: 2.5rem;  
  margin-right: 0.5rem;  
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6)); /* 图标发光 */  
}  

.stats-value {  
  text-align: left;  
}  

.number {  
  font-size: 1.5rem;  
  font-weight: bold;  
  color: #00ffea; /* 数据颜色 */  
}  

.label {  
  font-size: 0.9rem;  
  color: rgba(255, 255, 255, 0.7); /* 描述颜色 */  
}  

/* 日志列表样式 */  
.log-list {  
  margin-top: 0.5rem;  
  max-height: 200px; /* 限制最大高度 */  
  overflow-y: auto; /* 滚动条 */  
}  

.log-item {  
  display: flex;  
  align-items: center;  
  margin-bottom: 0.75rem;  
}  

.log-content {  
  display: flex;  
  justify-content: space-between;  
  width: 100%;  
}  

.log-time {  
  font-size: 0.8rem;  
  margin-right: 0.5rem;  
  color: rgba(255, 255, 255, 0.7); /* 时间颜色 */  
}  

.log-desc {  
  font-size: 0.9rem;  
  color: #00b7ff; /* 描述文字 */  
}  

.log-state {  
  font-size: 0.9rem;  
  font-weight: bold;  
}  

.log-state.failure {  
  color: #ff4d4d; /* 故障状态颜色 */  
}  

.log-state.warning {  
  color: #ffa500; /* 预警状态颜色 */  
}  
</style>